<template>
  <el-container>
    <el-header class="index-header">
      <div class="index-header-option">
        <i class="el-icon-s-fold" @click="change_aside" v-if="!isCollapse"></i>
        <i class="el-icon-s-unfold" @click="change_aside" v-else></i>
      </div>
      <div class="index-header-name">谦恭造物后台管理系统</div>
      <div class="index-header-right-exit index-header-right-exit-edit" @click="editPass">修改密码</div>
      <div class="index-header-right-exit" @click="exit_login">退出登录</div>
      <el-dialog :close-on-click-modal="false"
              title="修改密码"
              :visible.sync="dialogVisible"
              width="35%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="旧密码" prop="password">
            <el-input type="text" v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="new_password">
            <el-input type="password" v-model="ruleForm.new_password"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="new_password1">
            <el-input type="password" v-model="ruleForm.new_password1"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="passwordLoading" type="primary" @click="submitForm('ruleForm')">确 认</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-header>
    <el-container>
      <el-aside class="index-aside">
        <el-menu :collapse="isCollapse"
                :default-active="defaultActive"
                 @open="handleOpen"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                 router
                active-text-color="#ffd04b">
          <el-menu-item index="/index">
            <i class="el-icon-s-home"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-menu-item index="/userlist">
            <i class="el-icon-user"></i>
            <span slot="title">用户列表</span>
          </el-menu-item>
          <el-menu-item index="/articlelist">
            <i class="el-icon-s-order"></i>
            <span slot="title">文章列表</span>
          </el-menu-item>
          <el-menu-item index="/orderlist">
            <i class="el-icon-files"></i>
            <span slot="title">订单列表</span>
          </el-menu-item>
          <el-menu-item index="/record">
            <i class="el-icon-copy-document"></i>
            <span slot="title">系统日志</span>
          </el-menu-item>
          <el-menu-item index="/systemSet">
            <i class="el-icon-postcard"></i>
            <span slot="title">系统配置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main style="background-color:#f1f1f1;">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// @ is an alias to /src
import { Message } from 'element-ui';
export default {
  name: 'Home',
  data () {
    return {
      passwordLoading: false,
      dialogVisible: false,
      ruleForm: {
        password: '',
        new_password: '',
        new_password1: ''
      },
      rules: {
        password: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        new_password: [
          { required: true, message: '请输入新密码', trigger: 'change' }
        ],
        new_password1: [
          { required: true, message: '请确认新密码', trigger: 'change' }
        ],
      },
      defaultActive: '/index',
      isCollapse: false
    }
  },
  components: {
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

          if (this.ruleForm.new_password1 !== this.ruleForm.new_password) {
            Message.warning('两次输入的密码不一致...')
          } else {
            this.passwordLoading = true
            let obj = {
              new_password: this.ruleForm.new_password,
              password: this.ruleForm.password
            }
            this.$http.put('api/admin/reset/pwd', obj).then(r =>{
              Message.success('密码修改成功...')
              this.dialogVisible = false
              this.passwordLoading = false
              this.ruleForm = {
                password: '',
                new_password: '',
                new_password1: ''
              }
            }).catch(() =>{
              this.passwordLoading = false
              this.ruleForm = {
                password: '',
                new_password: '',
                new_password1: ''
              }
            })
          }
        }
      });
    },
    editPass () {
      this.dialogVisible = true
    },
    change_aside () {
      this.isCollapse = !this.isCollapse
    },
    exit_login () {
      this.$confirm('退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.clear()
        this.$router.push('/login')
      })

    },
    handleOpen (index, item) {
      console.log(index, item, '空开怀赛')
    }
  },
  created () {
    this.defaultActive = this.$route.path
    console.log(this.$route, '帅江淮赛季')
  }
}
</script>
<style lang="less" scoped>
  .index-header{
    position: relative;
    display: flex;align-items: center;
    height: 70px !important;
    background-color: #242f42;
    color: #fff;
  }
  .index-header-right-exit{
    position: absolute;
    right: 30px;
    top: 28px;
    color: #fff;font-size: 18px;cursor: pointer;
  }
  .index-header-right-exit-edit{
    right: 120px;
  }
  .index-aside{
    width: auto !important;
    background-color: rgb(84, 92, 100);
    min-height: calc(100vh - 70px);
  }
  .index-header-name{
    font-size: 24px;
    color: #fff;margin-left: 10px;
  }
  .index-header-option{
    i{
      font-size: 30px;
      cursor: pointer;
    }
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 250px;
  }
</style>
<style lang="less">
  .index-aside {
    ul{
      border-right: 1px solid rgb(84, 92, 100);
    }
  }
</style>
